<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:#fff;">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons" style="color:#000;"></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32" style="color:#000;"></view>
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size:38rpx;" v-if="i18n" @tap.stop="languageShow = true">
          <cloudIcon name="icondongtai" style="font-size:42rpx;color: rgb(100, 130, 245);"></cloudIcon>
        </view>
      </view>
    </cloudHeader>
    <!-- 页面主体 -->
    <view class="grace-body mt-40">
      <view class="ml-40 mr-40">
        <view class="grace-center">
          <image src="/static/logo.png" mode="widthFix" class="logo" />
        </view>
        <view style="padding-top: 80rpx;">
          <graceNavBar
            v-if="only === false"
            :items="navs"
            :size="160"
            lineHeight="30rpx"
            :isCenter="true"
            :currentIndex="currentNavIndex"
            activeDirection="center"
            padding="10rpx"
            activeLineBg="#6482F5"
            textAlign="center"
            activeColor="#6482F5"
            :activeLineWidth="currentNavIndex == 0 ? '110rpx' : '138rpx'"
            activeLineHeight="4rpx"
            color="#333333"
            :margin="10"
            @change="navChange"
          ></graceNavBar>
        </view>
        <view style="margin-top: 40rpx;">
          <cloudLoginPassword v-if="isPasswordLogin"></cloudLoginPassword>
          <cloudLoginMobile v-if="isMobileLogin"></cloudLoginMobile>
        </view>
      </view>
      <!-- 注册新账号 -->
      <view class="grace-nowrap grace-flex-center" style="margin-top:80rpx;">
        <navigator url="/pages/auth/register">
          <text style="color:#6785F7;font-size:30rpx;">
            {{
            $t("account.login.register")
            }}
          </text>
        </navigator>
      </view>
      <!-- 第三方登录 -->
      <view style="position:fixed; left:25rpx; bottom:100rpx; width:700rpx;">
        <!-- <view class="grace-line-title grace-margin-top">
          <view class="grace-line-title-line"></view>
          <text class="grace-line-title-text">第三方登录</text>
          <view class="grace-line-title-line"></view>
        </view>
        <view class="grace-margin-top grace-nowrap grace-flex-center">
          <text
            class="grace-login-three-items grace-icons icon-weixin grace-blue"
            @tap="loginWithWx"
          ></text>
          <text
            class="grace-login-three-items grace-icons icon-qq grace-blue"
          ></text>
          <text
            class="grace-login-three-items grace-icons icon-weibo grace-blue"
          ></text>
        </view>-->
        <view class="grace-margin-top grace-nowrap grace-flex-center">
          <navigator url="/pages/auth/forget">
            <text
              class="grace-blue"
              style="color:#666666!important;font-size:30rpx;"
            >{{ $t("common.operate.forget") }}</text>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 多语言弹框 -->
    <cloudLanguageDialog :show="languageShow" @closeDialog="languageShow = false"></cloudLanguageDialog>
  </cloudPage>
</template>

<script>
import graceNavBar from "@/graceUI/components/graceNavBar";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      currentNavIndex: 0,
      only: false, // navs的index(指定登录方式), 或者false(多种登录方式)
      languageShow: false
    };
  },
  computed: {
    ...mapGetters("system", ["i18n"]),
    isPasswordLogin() {
      return (
        (this.only === false && this.currentNavIndex == 0) || this.only === 0
      );
    },
    isMobileLogin() {
      return (
        (this.only === false && this.currentNavIndex == 1) || this.only === 1
      );
    },
    navs() {
      return [
        this.$t("account.login.passwordLogin"),
        this.$t("account.login.mobileLogin")
      ];
    }
  },
  methods: {
    navChange(index) {
      this.currentNavIndex = index;
    }
  }
};
</script>

<style scoped>
page {
  background: #fff;
}
.logo {
  width: 337rpx;
  height: 50rpx;
}
</style>
